<template>
	<div class="about">
		<el-container>
			<el-main>
				<el-row :gutter="10">
					<el-col :span="24">
						<h5><img class="title1" :src="res.youhaohuo.title1.pic" :alt="res.youhaohuo.title1.h5"><small>{{ res.youhaohuo.title1.small }}</small></h5>
						<el-col :span="4" v-for="(item,index) in res.youhaohuo.pic6" :key="index">
							<a href>
								<img :src="item.img1[0].src1" alt="">
							</a href>
							<h3>{{ item.title2 }}<br><small>{{ item.see1 }}</small><br>
								<h5>{{ item.see2 }}</h5>
							</h3>
						</el-col>

					</el-col>
				</el-row>
			</el-main>
		</el-container>
		<el-container>
			<el-main>
				<el-row :gutter="20">
					<el-col :span="12">
						<h2><img class="title" :src="res.meirihaodian.title.pic" :alt="res.meirihaodian.title.h2"> <small>{{ res.meirihaodian.title.small }}</small></h2>
						<el-row :gutter="10">
							<el-col :span="12" v-for="(item,index) in res.meirihaodian.pics" :key="index">
								<h3>{{ item.title }}</h3>
								<el-row :gutter="2">
									<el-col :span="16">
										<a href="">
											<img class="pic" :src="item.imgs[0].src" alt="">
										</a>
									</el-col>
									<el-col :span="8">
										<a href="" class="mb-2">
											<img class="pic2" :src="item.imgs[1].src" alt="">
										</a>
										<a href="">
											<img class="pic2" :src="item.imgs[2].src" alt="">
										</a>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="12">
						<h2><img class="title" :src="res.taobaozhibo.title.pic" :alt="res.taobaozhibo.title.h2"> <small>{{ res.taobaozhibo.title.small }}</small></h2>
						<el-row :gutter="10">
							<el-col :span="12" v-for="(item,index) in res.taobaozhibo.pics" :key="index">
								<h3>{{ item.title }} <small>{{ item.see }}</small></h3>
								<el-row :gutter="2">
									<el-col :span="16">
										<a href="">
											<img class="pic" :src="item.imgs[0].src" alt="">
										</a>
									</el-col>
									<el-col :span="8">
										<a href="" class="mb-2">
											<img class="pic2" :src="item.imgs[1].src" alt="">
										</a>
										<a href="">
											<img class="pic2" :src="item.imgs[2].src" alt="">
										</a>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	//模拟请求到的数据
	let dataSource = {
		"youhaohuo": {
			"title1": {
				"pic": require("../assets/home/title3.png"),
				"h5": "有好货",
				"small": "与品质生活不期而遇"
			},
			"pic6": [{
					"img1": [{
						"link1": "",
						"src1": require("../assets/home/01.webp")
					}],
					"title2": "大豆家方头奶奶鞋",
					"see1": "一脚蹬设计，方便日常的",
					"see2": "3758人说好"
				},
				{
					"img1": [{
						"link1": "",
						"src1": require("../assets/home/02.webp")
					}],
					"title2": "佳宝路转角水槽",
					"see1": "304不锈钢，表面光滑坚固",
					"see2": "123人说好"
				},
				{
					"img1": [{
						"link1": "",
						"src1": require("../assets/home/03.webp")
					}],
					"title2": "肖优秀真皮细高跟过膝",
					"see1": "细跟箭头设计更显优雅女",
					"see2": "68人说好"
				},
				{
					"img1": [{
						"link1": "",
						"src1": require("../assets/home/04.webp")
					}],
					"title2": "好利来黑天鹅蛋糕",
					"see1": "材料新鲜分量足，奶香",
					"see2": "8人说好"
				},
				{
					"img1": [{
						"link1": "",
						"src1": require("../assets/home/05.webp")
					}],
					"title2": "汽车盲点变道辅助系统",
					"see1": "行车安全盲区检测系统",
					"see2": "24人说好"
				},
				{
					"img1": [{
						"link1": "",
						"src1": require("../assets/home/06.webp")
					}],
					"title2": "PUMA芥末绿复古老爹鞋",
					"see1": "芥末绿色的鞋面视觉上给",
					"see2": "7人说好"
				}
			]
		},
		"meirihaodian": {
			"title": {
				"pic": require("../assets/home/title1.png"),
				"h2": "每日好店",
				"small": "发现深藏的好店"
			},
			"pics": [{
					"title": "万能集市",
					"imgs": [{
							"link": "",
							"src": require("../assets/home/1.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/2.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/3.webp")
						}
					]
				},
				{
					"title": "淘宝江湖",
					"imgs": [{
							"link": "",
							"src": require("../assets/home/4.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/5.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/6.webp")
						}
					]
				},
				{
					"title": "深藏不露",
					"imgs": [{
							"link": "",
							"src": require("../assets/home/7.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/8.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/9.webp")
						}
					]
				},
				{
					"title": "高手林立",
					"imgs": [{
							"link": "",
							"src": require("../assets/home/10.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/11.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/12.webp")
						}
					]
				}
			]
		},
		"taobaozhibo": {
			"title": {
				"pic": require("../assets/home/title2.png"),
				"h2": "淘宝直播",
				"small": "你的爱豆直播等你哟！"
			},
			"pics": [{
					"title": "aj1黑脚趾",
					"see": "10382观看",
					"imgs": [{
							"link": "",
							"src": require("../assets/home/13.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/14.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/15.webp")
						}
					]
				},
				{
					"title": "青青河边草真皮",
					"see": "8965观看",
					"imgs": [{
							"link": "",
							"src": require("../assets/home/16.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/17.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/18.webp")
						}
					]
				},
				{
					"title": "涵木家",
					"see": "4412观看",
					"imgs": [{
							"link": "",
							"src": require("../assets/home/19.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/20.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/21.webp")
						}
					]
				},
				{
					"title": "厂家优品",
					"see": "5771观看",
					"imgs": [{
							"link": "",
							"src": require("../assets/home/22.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/23.webp")
						},
						{
							"link": "",
							"src": require("../assets/home/24.webp")
						}
					]
				}
			]
		}
	};

	export default {
		data() {
			return {
				res: dataSource
			};
		}
	};
</script>

<style>
	.el-container {
		width: 1200px;
		margin: auto;
	}

	h2 {}

	h3 {
		font-size: 16px;
		font-weight: 300;
	}

	small {
		font-size: 12px;
		color: #999;
		font-weight: 300;
	}

	a {
		display: block;
	}

	img {
		display: block;
		width: 100%;
	}

	.pic {
		height: 180px;
	}

	.pic2 {
		height: 89px;
	}

	.mb-2 {
		margin-bottom: 2px;
	}

	.title {
		height: 24px;
		display: inline-block;
		width: auto;
	}

	h5 {
		font-weight: 300;
		margin-top: -1px;
		color: #35b1ff
	}

	h2 small {
		position: relative;
		top: -8px;
	}

	h4 small {
		position: relative;
		left: 150px;
		top: -40px;
	}

	h5 img {
		width: auto;
		height: 24px;
		display: inline-block;
	}

	h5 small {
		position: relative;
		top: -7px;

	}
</style>
